<template>
	<view>
		<view class="top-search">
			<u-search @change="searchData" placeholder="搜索" v-model="expertSort.keyword" clearabled
				:show-action="false"></u-search>
		</view>
		<view class="dropdown">
			<u-dropdown ref="uDropdown" @open="open" 
			:duration="600"
			:dropDownShow="dropDownShow" @close="close" active-color="#F4333C" menu-icon-size="6"
				>
				<u-dropdown-item v-model="dropdownIndex" :title="selectList.title">
					<view class="slot-content">
						<view class="radio-content" v-for="(item, index) in selectList.options" :key="index">
							<u-radio-group v-model="selectValue">
								<view class="name" :style="activation(item.label)">
									{{ item.label }}
								</view>
								<u-radio @change="radioChange" :name="item.label" :disabled="item.disabled"
									active-color="#F4333C">
									<!-- {{item.label}} -->
								</u-radio>
							</u-radio-group>
						</view>
					</view>
				</u-dropdown-item>
			</u-dropdown>
		</view>
		<!-- 可咨询的医生信息 -->
		<view class="main-inquiries" v-for="(item, index) in expertSortList" :key="index">
			<view class="main-content" @click="toDoctorIndex(item)">
				<u-avatar :src="item.face" mode="circle" size="104"></u-avatar>
				<view class="right">
					<view class="right-name">
						{{ item.realName }}
					</view>
					<view class="right-desc">
						<span>擅长：</span>
						<span class="desc">
							{{ item.domain }}
						</span>
					</view>
					<view class="price-score f-row">
						<view class="f-row">
							<view>
								￥
							</view>
							<view class="bigger">{{ item.consultPrice }}</view>
						</view>
						<view  class="f-row">
							<u-icon name="star-fill" :color="activeColor" size="28"></u-icon>
							<view style="font-size: 28rpx;">
								{{ item.scoreAvg ? item.scoreAvg.toFixed(1) : "0" }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="ask-doctor">
				<u-button shape="circle" :custom-style="customStyle" @click="askDoctor(item)" hover-class="none">问专家
				</u-button>
			</view>
		</view>
		<view class="nomore"> {{ btmBtn }} </view>
	</view>
</template>

<script>
	import {
		API
	} from "@/config/myApi.js";
	export default {
		data() {
			return {
				dropDownShow:false,
				btmBtn: "正在加载~~",
				// 专家排序的搜索默认项
				consultOpen: 1, //通过在线预约进来的
				expertSort: {
					keyword: "",
					page: 1,
					rows: 10,
					sortField: null,
				},
				total: 0,
				expertSortList: [],
				// sortMethod: true, //默认随机，点击降序
				src: "https://lupic.cdn.bcebos.com/20200412/3058923702_14_730_521.jpg",
				activeColor: "#F4333C",
				customStyle: {
					width: "160rpx",
					height: "62rpx",
					color: "#F4333C",
					borderRadius: "31rpx",
				},
				itemStyle: {
					height: "77rpx",
					color: "#F4333C",
					fontSize: "26rpx",
					fontWeight: "bold",
					lineHeight: "77rpx",
					textAlign: "center",
				},
				// 下拉选择
				dropdownIndex: 1,
				selectValue: "默认排序", //默认
				selectList: {
					title: "综合排序",
					options: [{
							label: "默认排序",
							value: 1,
						},
						{
							label: "好评优先",
							value: 2,
						},
						{
							label: "热度优先",
							value: 3,
						},
						{
							label: "销量优先",
							value: 4,
						},
					],
				},
			};
		},
		onLoad(option) {
			this.consultOpen = option.consultOpen;
			this.getExpertSortListFn(); //获取专家排序的集合
		},

		computed: {
			// 控制激活样式
			activation() {
				
				return (label) => {
					if (label === this.selectValue) {
						return {
							color: "#F4333C",
						};
					} else {
						return {
							color: "",
						};
					}
				};
			},
		},
		// 触底刷新
		onReachBottom() {
			/* 
	1  10   12
	*/
			if (this.expertSort.page * this.expertSort.rows < this.total) {
				this.expertSort.page = this.expertSort.page + 1;
				this.getExpertSortListFn();
			}
		},
		methods: {
			// 获取专家排序的集合
			async getExpertSortListFn() {
				this.btmBtn = "正在加载~~";
				// const pram = {
				// 	page: 0,
				// 	rows: 10
				// }
				const pram = {
					...this.expertSort,
					consultOpen: this.consultOpen,
				};
				try {
					let res = await API.getExpertSortList(pram);
					if (res.code === 200) {
						res.result.list.forEach((v) => {
							if (v.consultPrice) {
								v.consultPrice = v.consultPrice.toFixed(2);
							} else {
								v.consultPrice = "0.00";
							}
						});
						this.expertSortList = this.expertSortList.concat(res.result.list);
						this.total = res.result.total;
						this.btmBtn = "加载更多~~";
						if (this.expertSort.page == 1 && this.total <= 10) {
							this.btmBtn = "没有更多了~~";
						}
					} else {
						this.expertSort.page = 1
						this.expertSortList = []
						this.expertSort.sortField = null
						this.selectValue = '默认排序';
						uni.showToast({
							icon: 'none',
							title: '获取专家列表失败！',
							duration: 1500
						})
					}
				} catch (err) {
					console.log(err, '获取专家列表错误');
				}
			},
			// 搜索关键词
			searchData() {
				this.expertSort.page =1
					this.expertSortList=[]
				this.getExpertSortListFn();
			},
			// 打开下拉菜单
			open(index) {
				// 展开某个下来菜单时，先关闭原来的其他菜单的高亮
				// 同时内部会自动给当前展开项进行高亮
				this.dropDownShow=true
				// this.$refs.uDropdown.highlight();
			},
			// 关闭下拉菜单
			close(index) {
						this.dropDownShow=false
				// 关闭的时候，给当前项加上高亮
				// 当然，您也可以通过监听dropdown-item的@change事件进行处理
				// this.$refs.uDropdown.highlight(index);
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				this.selectValue = e;
				this.expertSort.sortField;
				if (e === "默认排序") {
					this.selectList.title=e
					this.expertSort.sortField = null;
				} else if (e === "好评优先") {
					this.selectList.title=e
					this.expertSort.sortField = 1;
				} else if (e === "热度优先") {
					this.selectList.title=e
					this.expertSort.sortField = 2;
				} else {
					this.selectList.title=e
					this.expertSort.sortField = 3;
				}
				this.expertSort.page =1
					this.expertSortList=[]
				this.getExpertSortListFn();
				this.$refs.uDropdown.close();
			},
			// 选中任一radio时，由radio-group触发
			// radioGroupChange(e) {

			// },
			//排序先降序再升序
			// sortHandle(name) {
			// 	console.log(name);
			// 	let arr = [1, 5, 3]
			// 	if (this.sortMethod) {
			// 		arr.sort((a, b) => b - a)
			// 		console.log(arr);
			// 	} else {
			// 		arr.sort();
			// 		console.log(arr);
			// 	}
			// 	this.sortMethod = !this.sortMethod;
			// },
			//去医生主页
			toDoctorIndex(item) {
				uni.navigateTo({
					url: "/pages/doctor/doctorIndex?doctorId=" + item.id,
				});
			},
			//问医生
			askDoctor(item) {
				uni.setStorageSync("doctorDetail", JSON.stringify(item));
				uni.navigateTo({
					url: "/pages/mine/myConsultation/startConsulting?options="+JSON.stringify(item), //开始咨询
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	$mainPadding: 30rpx;
	$activeColor: #f4333c;
	$baseColor: #333333;

	.top-search {
		background-color: #fff;
		padding: 30rpx $mainPadding 0;
		// height: 174rpx;
	}

	.dropdown {
		background-color: #fff;

		.radio-content {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100vw;
			height: 100rpx;
			padding: 0 50rpx;
			background-color: #fff;
			border-top: 1rpx solid #e3e3e3;

			.name {
				width: 80vw;
				flex: 1;
			}
		}
	}

	// 综合排序
	::v-deep.u-collapse-title {
		background-color: #fff;

		&::after {
			content: ">";
			display: inline-block;
			transform: rotate(90deg);
			position: absolute;
			right: calc(50% - 70px);
		}
	}

	.collapse-item {
		width: 100%;
		height: 100rpx;
		background-color: #fff;
	}

	// 主体咨询
	.main-inquiries {
		box-sizing: border-box;
		// height: 402rpx;
		margin: $mainPadding;
		// margin: 30rpx 0 0;
		background: #ffffff;
		border-radius: 14rpx;
		padding: 24rpx 24rpx 0;

		.main-content {
			display: flex;
			// align-items: center;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #e3e3e3;

			.u-avatar {
				margin-right: 24rpx;
			}

			.right {
				color: #333333;
				font-size: 32rpx;
				font-weight: bold;
				line-height: 40rpx;
				flex: 1;

				.right-name {
					margin-bottom: 20rpx;
					font-size: 32rpx;
				}

				// 右侧描述
				.right-desc {
					margin-bottom: 30rpx;
					line-height: 40rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					overflow: hidden;

					.desc {
						color: #666;
						font-weight: normal;
					}
				}

				// 价格及评分
				.price-score {
					display: flex;
					align-items: center;
					font-size: 20rpx;
					color: $activeColor;

					.bigger {
						margin-right: 30rpx;
						font-size: 28rpx;
					}
				}
			}
		}
	}

	// 问医生
	.ask-doctor {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		height: 118rpx;

		.u-btn {
			margin-right: 24rpx;
		}
	}

	//没有更多了
	.nomore {
		height: 75rpx;
		color: #999999;
		text-align: center;
	}
	.f-row{
		display: flex;
		align-items: center;
	}
</style>
